var paths = {}, speed = 330, easing = mina.backout;

(function() {
	function init() {
		[].slice.call ( document.querySelectorAll( '#grid > a' ) ).forEach( function( el ) {
			var s = Snap( el.querySelector( 'svg' ) );
			var path = s.select( 'path' );
			var pathConfig = {
				from : path.attr( 'd' ),
				to : el.getAttribute( 'data-path-hover' )
			};
			$(el).mouseenter(function() {
				path.animate( { 'path' : pathConfig.to }, speed, easing );
			});
			$(el).mouseleave(function() {
				path.animate( { 'path' : pathConfig.from }, speed, easing );
			});
		});
	}
	init();
})();

/*Variavel que armazena a contagem da porcentagem*/
var porcento = 0; 
/*Variavel que armazena a contagem da porcentagem*/
var carregar = true;
/*
Incrimenta a barra de load com tempo
@param
	tempo = tempo em milesegundos intervalo de crescimento da barra de load
*/
function aumentar(tempo) {
    var $s = $(".knob");
    $s.val(porcento++).trigger("change");
    if(porcento <= 100 && porcento >= 0) {
    	setTimeout("aumentar()",tempo );
    }
}
/*Inicia o carregamento do load*/
function loadInit(){
	porcento = 0;
	aumentar(15);
}

var handrightItemOver = undefined;
/*
Retorna um elemento com base no seletor que deve ser uma classe de um elemento html
que estejam em uma posicao desejada.
@params
	event= {x,y} contem a posicao x e y na tela a qual deseja buscar
	seletor = classe de algum elemento html que deseja ser atigido.
*/
function getElementByPosition(event,seletor){
    var elemento = document.elementFromPoint(event.x, event.y);
    var elementos = new Array();
    var retorno;
    while( elemento != undefined){
    	var className = $(elemento).prop('class');
		classe = (typeof className != "string") ? className.baseVal : className;
        if( classe.indexOf(seletor)>= 0 ){
    		retorno = elemento;
    		break; 
        }
        elemento.style.display = "none";
        elementos.push(elemento);
        elemento =  document.elementFromPoint(event.x, event.y);
    }
    for(var i in elementos){
        elementos[i].style.display = "block";
    }
    return retorno;
}

/*Funcao atualiza a posicao da mao na tela
@params 
		hand_s = string identificado da mao se direita ou esuqerda
		e = {x,y} objeto contendo a posicao de x e y para mao.
		player = valor inteiro correspondente ao usuario para associar a mao ao jogador.
*/
function updateHandPosition(hand_s , e ,player)
		{
			var id = player+'-'+hand_s;
		    // captura o componente html img correspondente a mao do jogador
		    var hand = document.getElementById(id);
		    // caso a mao ainda nao tenha sido criado sera adicionado um novo elemento html e associado ao jogador
		    if(hand == null){
		    	var htmlContent= '<img id="'+id+'" alt="" src="img/'+hand_s+'.png" style="position:absolute;margin-left:-64px;margin-top:-64px;z-index:9999990"/>';
		    	$('body').append(htmlContent);
		    	var hand = document.getElementById(id);
		    }
		    // atualiza a posicao da mao
		    hand.style.left = e.x + "px";
		    hand.style.top = e.y + "px";

		    // tratamento da posicao da mao direita 
		    if(hand_s == "handright"){
		    	/*
		    		Como pode existir mais de uma ponto valido pois as maos sao cursores.
		    		buscar um intem por entre as camadas que tenha a classe itemMenu com a posicao em que mao esta .

		    	*/

		    	var elemento = getElementByPosition(e,'itemMenu');
		    	/*
				Caso esteja sobre um intem selecionavel executar o tratamento
		    	*/
		    	if(elemento != undefined){
		    		// exibe a barra de loading
		    		$("#loading").show().css('top',e.y).css('left',e.x);

		    		if(elemento != handrightItemOver){
		    			handrightItemOver = elemento;
		    			$(elemento).closest('a').addClass("hover");
		    			$(elemento).closest('a').trigger("mouseenter");
		    			// incia o carregamento do loading
		    			if(carregar){
		    				loadInit();
		    			}
		    		}
		    	}else{
		    		// reseta a porcentagem do loading
		    		var $s = $(".knob");
		    		porcento = -1;
	        		$s.val(porcento +=1 ).trigger("change");
	        		$("#loading").hide();
	        		$(document.querySelectorAll( '#grid > a' )).each( function() {
	        			$(this).removeClass("hover").mouseleave();	
	        		});
					handrightItemOver = undefined;
		    	}
		    }
		}
/*
Funcao responsavel pelo carregamento e composicao do loading ao redor da mao
Contem configuracoes e definicoes de callbacks de atualizacao de conteudo.
*/
$(function(){
	$(".knob").knob({
        change : function (value) {

        },
            //console.log("change : " + value);
        release : function (value) {
            //console.log(this.$.attr('value'));
            // console.log("release : " + value);
        },
        cancel : function () {
            // console.log("cancel : ", this);
        },
        /*format : function (value) {
            return value + '%';
        },*/
        draw : function () {

            // "tron" case
            if(this.$.data('skin') == 'tron') {

                this.cursorExt = 0.3;

                var a = this.arc(this.cv)  // Arc
                    , pa                   // Previous arc
                    , r = 1;

                this.g.lineWidth = this.lineWidth;

                if (this.o.displayPrevious) {
                    pa = this.arc(this.v);
                    this.g.beginPath();
                    this.g.strokeStyle = this.pColor;
                    this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, pa.s, pa.e, pa.d);
                    this.g.stroke();
                }

                this.g.beginPath();
                this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ;
                this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, a.s, a.e, a.d);
                this.g.stroke();

                this.g.lineWidth = 2;
                this.g.beginPath();
                this.g.strokeStyle = this.o.fgColor;
                this.g.arc( this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
                this.g.stroke();

                return false;
            }
        }
    });
});